﻿@{
    Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
    <title>点击超链接切换打开不同文件</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
        /* 设置整个页面的样式 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .Word {
            display: flex;
        }

        .sidebar {
            flex: 0 0 25%;
            /* 启用Flex布局 */
            height: 100vh;
            /* 占满整个视口宽度（或省略，因为默认就是100%） */
            border-right: 1px solid #ccc;
            /* padding: 10px 100px */
            text-align: center;
            padding: 10px 50px;
        }

        .file-link {
            cursor: pointer;
            padding: 8px;
            border-bottom: 1px solid #eee;
            text-decoration: underline;
            color: #3568d7; /* Default link color */
            display: block; /* Make the link fill the entire li element */
        }

            .file-link:hover {
                background-color: #f0f0f0; /* Background color on hover */
                color: #42b983; /* Text color on hover */
            }

        .content {
            flex: 0 0 75%;
            padding: 10px;
        }

        h4 {
            color: #42b983;
        }
    </style>
    <script type="text/javascript">

        var fileName = "test1.docx";//默认打开test1.docx
        firstLoadFile(fileName);
        function firstLoadFile(fileName) {
            $.post("Word", { fileName: fileName }, function (data) {
                $("#divDocView").html(data);
            });
        }
        function selectFile(file) {
            selectedFile.value = file;
            switchFile(file.fileName);
        }
        function switchFile(fileName) {
            $.post("Word", { fileName: fileName }, function (data) {
                $("#divDocView").html(data);
                pageofficectrl.Reload(); //必须，切换打开文件时必须调用pageofficectrl.Reload()
            });
        }
    </script>
</head>
<body>
    <div class="Word">
        <div class="sidebar">
            <h3>文件列表</h3>
            <ul>
                <li id="1" onclick="switchFile('test1.docx')" class="file-link">
                    PageOffice对客户端有什么要求
                </li>
                <li id="2" onclick="switchFile('test2.docx')" class="file-link">
                    PageOffice授权协议
                </li>
                <li id="3" onclick="switchFile('test3.docx')" class="file-link">
                    试用版和正式版有什么区别
                </li>
            </ul>
        </div>
        <div class="content">
            <h4></h4>
            <!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
            <div style="width:auto; height:100%;" id="divDocView"></div>
        </div>
    </div>
</body>
</html>
